<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>双人对战</title>
  <!-- ----------------------------------css区---------------------------- -->
  <style type="text/css">
   body {
    position: relative;
   }
   #boxId {
    position: absolute;
    top: 60;
    left: 60;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: red;
   }
   #zidan{
    position:absolute;
    top:0;
    left:0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: red;
   }
   #xuetiao1{
    position:absolute;
    top: 0px;
    left: 0;
    width: 100px;
    height: 30px;
    background-color: red;
   }
   #xuetiao2{
    position:absolute;
    top: 0px;
    left: 600px;
    width: 100px;
    height: 30px;
    background-color: red;
   }
   #pic {
    position: absolute;
    top: 60;
    left: 60;
    width: 100px;
    height: 100px;

   }
   #guaishou{
    position: absolute;
    top: 60;
    left: 500px;
    width: 200px;
    height: 200px;
   }
  </style>
  <!-- -----------------------------------js区----------------------------------- -->
  <script>
    alert("左边玩家WASD移动，F攻击；右边玩家方向键移动，右键盘0攻击")
    class people{
      domTop=60;            //变量直接这样定义,不用加var,也不用加let
      domLeft=60;
      width=100;
      height=100;
      stopleft=true
      stopright=true
      stopup=true
      stopdown=true
      xueliang=300
      speed=5
      dead=0
      constructor(left,top,width,height){  
           this.domLeft=left
           this.domTop=top
           this.width=width
           this.height=height
           

      }
      moveleft(){
         this.domLeft-=this.speed
      }
      moveright(){
        this.domLeft+=this.speed
      }
      moveup(){
        this.domTop-=this.speed
      }
      movedown(){
        this.domTop+=this.speed
      }
      move(img_name){
        if (this.stopleft==false){
          this.moveleft();
        }
        if(this.stopright==false){
          this.moveright();
        }
        if(this.stopup==false){
          this.moveup();
        }
        if(this.stopdown==false){
          this.movedown();
        }
        let boxDom = document.getElementById(img_name);   //没有这个的话，是找不到变量的
        boxDom.style.top = this.domTop + "px";
        boxDom.style.left = this.domLeft + "px";
        boxDom.style.height=this.height+"px"
        boxDom.style.width=this.width+"px"
        
      }
    }
    class guaishou extends people{

    }
    class one_zidan{
      domTop=10;            //变量直接这样定义,不用加var,也不用加let
      domLeft=10;
      arrival_end=0
      end_left=800          //这里修改子弹的结束位置
      speed=5              //向右的为正
      para = document.createElement("img");
      
       constructor(use_person,speed,type){
        //
        this.speed=speed
        this.para.style.position="absolute";
        this.domLeft=use_person.domLeft+100;                //这里修改子弹开始打出的相对位置
        this.domTop=use_person.domTop+60;
        if(type==1){
        this.para.style.width="20px";
        this.para.style.height="20px";
        this.para.style.backgroundColor="red";
        this.para.style.borderRadius= "50%";
        }
        else if(type==2){
          this.para.src='picture/火箭.png';
          this.para.style.width="60px";
          this.para.style.height="60px";
          this.para.style.backgroundSize="cover";
        }
       }
       run(){
        //console.log(this.para.style.left)
        
        this.domLeft+=this.speed
              
        
        if(this.domLeft<0||this.domLeft>this.end_left){
          this.arrival_end=1;
          console.log("daoda")              //这个是判断子弹有没有打到边界
          //this.src="picture/爆炸.png"
          this.para.style.visibility="hidden";
        }
        this.para.style.top=this.domTop+"px";
        this.para.style.left=this.domLeft+"px";
        let element = document.getElementById("body1");
        element.appendChild(this.para);
       }
    }
    class zidan_set{
         lst=[]
         constructor(){
       
       }
         add(use_person,speed,type){
          let a=new one_zidan(use_person,speed,type);          //constructor(use_person,speed,type){这里可以修改子弹的方向和速度
          this.lst.push(a);
         }
         all_run(guaishou){
          
          for(let i=0;i<this.lst.length;i++){
            this.lst[i].run();
            //console.log(guaishou.domTop,guaishou.domLeft,guaishou,this.lst[i].domLeft)
            if(this.lst[i].arrival_end==1){
              var temp=this.lst[i]
              this.lst[i]=this.lst[this.lst.length-1]
              this.lst[this.lst.length-1]=temp
              this.lst.pop()                           //删除已经飞出去的子弹
              console.log(this.lst)
              
            }
            else if(guaishou.domLeft<this.lst[i].domLeft && this.lst[i].domLeft<guaishou.domLeft+guaishou.width){
              if(guaishou.domTop<this.lst[i].domTop && this.lst[i].domTop<guaishou.domTop+guaishou.height){
              var temp=this.lst[i]
              this.lst[i].para.style.visibility="hidden";
              this.lst[i]=this.lst[this.lst.length-1]
              this.lst[this.lst.lengtsh-1]=temp
              this.lst.pop()
              console.log(this.lst)
              guaishou.xueliang-=10
            }
            }
            
          }
          if(guaishou.xueliang==0 && guaishou.dead==0){
            alert("YOU WIN")
            guaishou.dead=1
          }
         }
         print(){
          console.log(this.lst)
          
         }
    }
    class xuetiao{

constructor(people,xuetiao_id){
      this.xuetiao_id=xuetiao_id;
      let xt = document.getElementById(xuetiao_id);   //没有这个的话，是找不到变量的
      // console.log(xuetiao_id)
    }
    refresh(people){
      // console.log(this.xuetiao_id)
      let xt = document.getElementById(this.xuetiao_id);   //没有这个的话，是找不到变量的
      console.log(xt.style.width);
      xt.style.width=people.xueliang+"px";
    }
}
    
    // ----------------------------------------上面是js类定义----------------------------
    //-----------------------------------------类的实例化区------------------------------
   var point1=new people(80,520,150,150);          //初始化一个变量 ,constructor(left,top,width,height){ ，改人物大小，位置在这里改
   var zidan1=new one_zidan(point1);
   var zidan2=new one_zidan(point1);
   
   var zidanset1=new zidan_set();
   var zidanset2=new zidan_set();
   var guaishou1=new guaishou(600,420,150,150);
   
   //zidanset1.add(point1);
   var xuetiao1= new xuetiao(point1,"xuetiao1");
   var xuetiao2= new xuetiao(guaishou1,"xuetiao2");
   //console.log(point1.domTop);
   // 这里只做了上和左的碰撞校验
   // 直接将方法丢给body全局触发
   // 一直按住按键也可以一直移动
   function keydown() {
    let boxDom = document.getElementById("boxId")
    if (event.which == 87) { // 上 w 87
      point1.stopup=false

    } else if (event.which == 68) { // 右 d  68
      point1.stopright=false
    } else if (event.which == 83) { // 下 s 83
      point1.stopdown=false
    }else if (event.which == 65) { // 左 a 65
    
      point1.stopleft=false
    
    }else if(event.which==70){      //f,用于人物打出子弹
        zidanset1.add(point1,10,2);       //let a=new one_zidan(use_person,speed,type);  
    }else if(event.which==67){      //c,用于测试
        zidanset1.print();
    }else if(event.which==37){       //左箭头，用于怪兽移动
         guaishou1.stopleft=false
    }else if(event.which==38){       //上箭头，用于怪兽移动
         guaishou1.stopup=false
    }else if(event.which==39){       //右箭头，用于怪兽移动
         guaishou1.stopright=false
    }
    else if(event.which==40){       //下箭头，用于怪兽移动
         guaishou1.stopdown=false
    }else if(event.which==96){       //下箭头，用于怪兽移动
         zidanset2.add(guaishou1,-10,1);
    }
}
   function keyup(){
    if (event.which == 87) { // 上 w 87
      point1.stopup=true

    } else if (event.which == 68) { // 右 d  68
      point1.stopright=true
    }else if (event.which == 83) { // 下 s 83
      point1.stopdown=true
    }else if (event.which == 65) { // 左 a 65
    
      point1.stopleft=true
    
    }else if(event.which==37){
      guaishou1.stopleft=true
    }else if(event.which==38){
      guaishou1.stopup=true
   }else if(event.which==39){
    guaishou1.stopright=true
   }else if(event.which==40){
    guaishou1.stopdown=true
   }
  }
   //-----------------------------------主循环函数--------------------------------------
   function updateTime() {
    // let boxDom = document.getElementById("boxId");   //没有这个的话，是找不到变量的
    // boxDom.style.top = point1.domTop + "px";
    // boxDom.style.left = point1.domLeft + "px";
    // console.log(boxDom.style.top);
    point1.move("pic");
    guaishou1.move("guaishou");
    //zidan1.run("zidan",5);
   xuetiao1.refresh(point1);
   xuetiao2.refresh(guaishou1);
   zidanset1.all_run(guaishou1);        //后面参数对应的是打中的目标
   zidanset2.all_run(point1);
}
 //--------------------------------------主循环------------------------------------
window.onload = function() {
    // 每隔1000毫秒（即每秒）执行一次updateTime函数
    setInterval(updateTime, 20);
};
  </script>

  <!-- ------------------------------------html区---------------ssssssssss----------------- -->
 </head>
 <body id="body1" onkeydown="keydown()" onkeyup="keyup()">
  <img id="background" src="picture/背景图.png" width="1000" height="700">  
  <img id="pic" src="picture/柯南.png" alt="无法显示图片" width="500" height="500">
  <img id="guaishou" src="picture/怪兽.png" alt="无法显示图片" width="500" height="500">
  
  <div id="xuetiao1"></div>
  <div id="xuetiao2"></div>
 </body>
</html>
